<template>
  <el-container>
    <!-- ----------侧边栏---------- -->
    <el-aside width="200">
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        text-color="#4e5bf8"
        ref="sideMenu"
        active-text-color="#E47833"
        :collapse="isCollapse"
      >
        <qf-sub-menu :sideMenu="$store.state.userMenu"></qf-sub-menu>
      </el-menu>
    </el-aside>
    <!-- ----------侧边栏---------- -->
    <el-container>
      <el-header style="text-align: center; font-size: 25px; height: 60px">
        <i
          :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
          @click="menuState"
          style="float: left; margin-top: 10px; font-size: 37px"
        ></i>
        <span>CRM系统</span>
        <el-dropdown
          style="font-size: 30px; vertical-align: bottom; float: right"
        >
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <span class="iconfont icon-VIP4"></span>
              <span>
                vip到期时间
                <br />
                {{ vipExpries }}
              </span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span class="iconfont icon-VIP4"></span>
              <span>vip充值</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span class="iconfont icon-icon-test"></span>
              <span>账号信息</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span class="iconfont icon-shangpinguanli"></span>
              <span>项目管理</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span class="iconfont icon-tuichu2"></span>
              <span @click="quit">退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
          <span style="float: right; color: #fff; font-size: 15px">
            {{ userInfo.nickname }}
            <i
              class="iconfont icon-down"
              style="color: #fff; font-size: 15px"
            ></i>
            <svg v-if="userInfo.vipLevel" class="icon" aria-hidden="true">
              <use :xlink:href="'#' + vipIconName"></use>
            </svg>
          </span>
          <el-avatar
            shape="square"
            :size="40"
            :src="avatarUrl"
            style="margin-top: 10px; margin-right: 10px"
          ></el-avatar>
        </el-dropdown>
      </el-header>
      <el-main>
        <el-breadcrumb separator="/" style="margin-bottom: 20px">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item
            v-for="item in crumb"
            :key="item.meta.title"
            :to="{ path: item.path }"
          >
            <a>{{ item.meta.name }}</a>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
    <!-- ------------------ -->
    <!-- --------------------- -->
  </el-container>
</template>

<style lang="less" scoped>
/deep/.el-main {
  background-color: #fff;
}

.el-dropdown-menu {
  background: linear-gradient(135deg, #4c4eff, #3e3ae9, #4f35df);
}
/deep/.el-dropdown-menu__item {
  width: 150px;
  background: linear-gradient(90deg, #4c4eff, #3e3ae9, #3935df);
  border-top: 1px solid white;
  color: #fff;
  font-weight: bold;
  text-align: center;
  span {
    font-size: 15px;
    margin-right: 5px;
  }
}

.el-header {
  //   background-color: #b3c0d1;
  color: white;
  line-height: 55px;
  background: linear-gradient(90deg, #4c4eff, #3e3ae9, #6235df);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-container,
body {
  background: linear-gradient(90deg, #4c4eff, #3e3ae9, #3935df);
  height: 100%;
}
.el-aside {
  color: #333;
}
</style>

<script>
import { mapState } from "vuex";
import moment from "moment";

export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    menuState() {
      this.isCollapse = !this.isCollapse;
      console.log(this.isCollapse);
    },
    quit() {
      console.log("quit!");
      localStorage.removeItem("qf-token");
      this.$router.push("/login");
      location.reload();
    },
  },
  computed: {
    ...mapState(["userInfo", "crumb"]),
    vipExpries() {
      let stamp = this.userInfo.vipStamp;
      let date = moment(stamp).format("YYYY-MM-DD HH:mm:ss");
      return date;
    },
    vipIconName() {
      let { vipLevel } = this.userInfo;
      if (vipLevel === 1) {
        return "icon-vip";
      } else if (vipLevel === 2) {
        return "icon-vip2";
      } else if (vipLevel === 3) {
        return "icon-vip_3";
      } else {
        return "";
      }
    },
    avatarUrl() {
      return this.userInfo?.headimgurl
        ? this.userInfo?.headimgurl
        : "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";
    },
  },
};
</script>
